<style lang="less">
@import "./styles/infor-card.less";
</style>

<template>
  <Card :padding="0">
    <div class="infor-card-con">
      <Col class="infor-card-icon-con" :style="{backgroundColor: color, color: 'white'}" span="8">
        <Row class="height-100" type="flex" align="middle" justify="center">
          <Icon :type="iconType" :custom="custom" :size="iconSize"></Icon>
        </Row>
      </Col>
      <Col span="16" class="height-100">
        <Row type="flex" align="middle" justify="center" class="height-100">
          <count-up
            class="infor-card-count user-created-count"
            :id-name="idName"
            :end-val="endVal"
            :color="color"
            :countSize="countSize"
            :countWeight="countWeight"
          >
            <p class="infor-intro-text" slot="intro">{{ introText }}</p>
          </count-up>
        </Row>
      </Col>
    </div>
  </Card>
</template>

<script>
import countUp from "./countUp.vue";

export default {
  name: "inforCard",
  components: {
    countUp
  },
  props: {
    idName: String,
    endVal: Number,
    color: String,
    iconType: String,
    custom: String,
    introText: String,
    countSize: {
      type: String,
      default: "30px"
    },
    countWeight: {
      type: Number,
      default: 700
    },
    iconSize: {
      type: Number,
      default: 40
    }
  }
};
</script>
<style lang="less">
@font-face {
  font-family: "custom-font"; /* project id 1461049 */
  src: url("//at.alicdn.com/t/font_1461049_175vy6g8lox.eot");
  src: url("//at.alicdn.com/t/font_1461049_175vy6g8lox.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1461049_175vy6g8lox.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1461049_175vy6g8lox.woff") format("woff"),
    url("//at.alicdn.com/t/font_1461049_175vy6g8lox.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1461049_175vy6g8lox.svg#iconfont") format("svg");
}

.i-icon {
  display: inline-block;
  font-family: "custom-font" !important;
  // speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
}
.i-icon-regular-bus:before {
  content: "\e659";
}

.i-icon-touring-bus:before {
  content: "\e682";
}

.i-icon-dangerous-vechicle:before {
  content: "\e615";
}

.i-icon-general-cargo:before {
  content: "\e69c";
}
</style>

